<template> 
    <div class="card-detail">
        <div class="content-head clear-both" @click="blurInputEvent"> 
            <div class="paste-card float-left" >
                <div class="head">
                    <div class="head-box">
                        <div class="head-img"> 
                            <image  class="img-icon"  mode="aspectFit" :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+stateList.user_avatar" v-if="stateList.user_avatar"></image> 
                            <image  class="img-icon"  mode="aspectFit" src="https://rqys.hleason.com/dist/images/head-default.png" v-else></image> 
                        </div>
                        <div class="describe">
                            <p class="title">{{stateList.user_name}}</p>
                            <p class="text-info">{{stateList.create_time}}</p>
                        </div>
                    </div>  
                </div>
                <div class="content">
                    <div class="text"><span style="color:#DC4644;margin-right:10rpx;">{{stateList.topics.title}}</span>{{stateList.content}}</div>
                    <div class="img-box"> 
                        <image  class="content-img"  mode="aspectFit"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item" v-for="(item,index) in stateList.imgList"></image>
                    </div>  
                </div>
            </div> 
        </div>
        <div class="main-title"> 全部评论&nbsp;<span>{{count}}</span></div>
        <div class="comment" @click="blurInputEvent">
            <div class="observer" v-for="(list,ListIndex) in ForumCommentsList" :key="ListIndex">
                <div class="user-img text-center">
                    <image class="img"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+list.sendUser.avatar" v-if="list.sendUser.avatar"></image> 
                </div>
                <div class="user-info">
                    <div class="title claer-both">
                        <span class="name">{{list.sendUser.user_name}}</span>
                        <span class="time float-right">{{list.create_time}}</span>
                    </div>
                    <div class="text" @click.stop="listenerInput(list,1)"> {{list.content}}</div>
                    <div class="more-text" v-if="list.commentSons.length!=0"> 
                        <div class="more-group" v-for="(sons,sonsIndex) in list.commentSons" :key="sonsIndex">
                            <div class="more-list" @click.stop="listenerInput(sons,2)"> 
                                <span class="user-name">{{sons.sonSendUser.user_name}}</span>
                                回复
                                <span class="user-name">{{sons.get_username}}</span>:
                                <span class="content">{{sons.content}} </span>
                            </div>
                            <!--<div class="more-delete text-center">删除</div>-->
                        </div>  
                    </div>
                </div>
            </div>
        </div>
        <div class="publish">
            <input type="text"  :focus="name_focus"  v-model="sendContent" :placeholder="placeholder" @confirm="postWrite"  @change="focusInput"/>
            <div class="caozuo text-center">
                <span class="dianji"><i class="iconfont iconfont-shurukuangchakanmima"></i>0</span> 
                <span @click.stop="shoucang(1,stateList)" v-if="stateList.is_collect==0"><i class="iconfont iconfont-shoucang"></i>  {{stateList.collects}}</span>
                <span @click.stop="shoucang(2,stateList)" v-else><i class="iconfont iconfont-shoucang shoucang"></i>{{stateList.collects}}</span> 
            </div>
        </div> 
    </div> 
</template>

<script> 
import pasteList from '@/components/tpl/paste-list' 
import * as api from '@/utils/api' 
export default {
    onLoad(opt){
        this.forumId=opt.forumId;
        this.getstateDetail(opt.forumId);
        this.getForumCommentsList(opt.forumId); 
    },
    components: {
        pasteList
    }, 
    data () {
        return {
            forumId:'',
            stateList:{},
            ForumCommentsList:[], //评论列表 all
            count:0, //评论条数
            name_focus:false,  //获得input焦点
            placeholder:'发表评论',
            sendContent:'', //发送信息
            sendType:1,   //1评论还是2回复评论的人，
            parent_id:0,   //评论帖子为0 评论 
            get_username:'', 
            uid:'',

        }
    },
    methods:{
        //获得帖子详情
        getstateDetail(id){
            let vm = this;
            let body={
                model: "Forums",
                with:{
                    "0":"topics",
                    "1":"collects",
                    "2":"shares",
                    "3":"comments"
                },
                condition:{
                    forum_id:id
                }
            };
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){ 
                    vm.stateList=res.data.data; 
                    vm.stateList.imgList=vm.stateList.images.split(',');   
                    vm.stateList.create_time_txt=vm.stateList.create_time.split(' ')[0];  
                }
            })
        },
        //帖子评论列表
        getForumCommentsList(id){
            let vm = this;
            let body={
                model: "ForumComments",
                with:{
                    "0":"sendUser",
                    "1":"commentSons"
                },
                condition:{
                    forum_id:id,
                    parent_id:0
                }
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    vm.count=res.data.data.count;
                    vm.ForumCommentsList=res.data.data.data;
                }
            })
        },
        //评论或回复评论帖子的人
        postWrite(){
            let vm = this;  
            let body={
                model: "ForumComments",
                data:{
                    parent_id: vm.parent_id,
                    forum_id: vm.forumId,      
                    send_uid: wx.getStorageSync('u_id'),              //---评论或回复者uid
                    get_uid:vm.uid,               //---被评论或回复的人uid 
                    get_username:vm.get_username, //---被评论或回复的人呢称 从senduser对象里面取 防止再次查询
                    content: vm.sendContent,   //内容
                    type: vm.sendType    //1评论还是2回复评论的人
                } 
            }; 
            api.createSite(body).then(res=>{
                if(res.data.code==200){
                    vm.getForumCommentsList(vm.forumId);
                    vm.placeholder='发表评论';
                    vm.sendContent=''; //发送信息
                    vm.sendType=1;   //1评论还是2回复评论的人，
                    vm.parent_id=0;   //评论帖子为0 评论 
                    vm.name_focus=false;
                }
            })
        },
        //获得input焦点
        listenerInput(item,a){
            this.name_focus=true; 
            this.sendType=2;   //1评论还是2回复评论的人 
            if(a==1){
                this.placeholder=`回复：${item.sendUser.user_name}`;
                this.uid=item.sendUser.id;
                this.get_username=item.sendUser.user_name;
                this.parent_id=item.id;   //评论帖子为0 评论  
            }else{
                this.placeholder=`回复：${item.sonSendUser.user_name}`;
                this.uid=item.sonSendUser.id;
                this.get_username=item.sonSendUser.user_name;
                 this.parent_id=item.parent_id;   //评论帖子为0 评论  
            } 
            console.log(item);
        },
        focusInput(){
            this.name_focus=true; 
        },
        //是去焦点
        blurInputEvent(){
            this.placeholder='发表评论';
            this.sendContent=''; //发送信息
            this.sendType=1;   //1评论还是2回复评论的人，
            this.parent_id=0;   //评论帖子为0 评论 
            // this.name_focus=false;
        },
        //收藏
        shoucang(val,item){
            let vm = this;
            let body={
                model: "Records",
                data:{
                    uid: wx.getStorageSync('u_id'),      
                    resource_id: item.forum_id,   
                    type:1,        
                    resource_type: item.tabs.type,   
                    category:"1" 
                } 
            }; 
            if(val==2){
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        vm.getstateDetail(vm.forumId);
                        wx.showToast({icon:'none', title: '取消成功' })
                    }
                });
            }else{
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        vm.getstateDetail(vm.forumId);
                        wx.showToast({icon:'none', title: '收藏成功' })
                    }
                });
            }
            
        },
    }, 

}

</script>
<style lang="scss" scoped>
 
.card-detail{
    width:100%;  
    background:#fff;
    padding-bottom:120rpx;
    .content-head{
        padding:20rpx;
        box-sizing:border-box;
        .paste-card{ 
            width:100%;
            box-sizing:border-box;  
            padding:20rpx;
            border:1rpx solid #ddd;
            background:#fff;
            margin-bottom:20rpx;
            .head{
                width:100%; 
                .head-box{
                    display: flex; 
                    align-items:Center; 
                    .head-img{
                        width:80rpx;
                        height:80rpx;  
                        .img-icon{
                            width:100%;
                            height:100%;
                            border-radius:50%;
                            border:0;  
                        } 
                    } 
                    .describe{ 
                        display:inline-block; 
                        margin-left:16rpx;
                        .title{
                            font-size:28rpx;
                            color:#A6A6A6; 
                        }
                        .text-info{
                            font-size:24rpx;
                            color:#CBCAC9;
                        }
                    }
                }
            
            }
            .content{  
                width:100%;
                margin-top:10rpx;  
                .text{
                    font-size:28rpx;
                    color:#333;
                    span{
                        font-weight:bold;
                        color:#000;
                    }
                }
                .img-box{
                    display:flex;
                    margin:20rpx 0;
                    padding:20rpx 0;
                    border-bottom:1rpx solid #ddd;
                    .content-img{
                        flex:1; 
                        height:180rpx;
                        max-width:30%;
                        margin-right:3%;
                        &:last-child{
                            margin-right:0;
                        }
                    }
                } 
            }
        }
    }
    .main-title{
        padding: 20rpx;
        font-size:28rpx;
        background:#fff;
        border-top:1rpx solid #DFDFDF;
        border-bottom:1rpx solid #DFDFDF;
    }
    .comment{
        padding:20rpx;
        
        .observer{
           display:flex; 
           margin-bottom:20rpx;
           border-bottom:1rpx solid #DFDFDF;
           .user-img{
               flex:0 0 90rpx;
               .img{
                   width:70rpx;
                   height:70rpx;
                   border-radius:50%;
               }
           }
           .user-info{
               flex:1;
               padding:10rpx;
               box-sizing:border-box;
               font-size:28rpx;
               .title{
                   
                   color:#333; 
                   .time{
                       font-size:26rpx;
                       color:#999;
                   }
               }
               .text{
                   margin:10rpx 0;
               }
               .more-text{
                    background:#EDEDED;
                    padding:15rpx;
                    box-sizing:border-box;
                    .more-group{
                        display:flex;
                       .more-list{
                            flex:1;
                            .user-name{
                                color:#5396D0;
                            } 
                        } 
                        .more-delete{
                            flex:0 0 75rpx;
                            color:#5396D0;
                        }
                    }
                    
                    
               }
           }
        }
    }
    .publish{
        position:fixed;
        justify-content:center;
        align-items:Center; 
        bottom:0;
        display:flex;
        width:100%;
        height:100rpx;
        padding:10rpx;
        box-sizing:border-box; 
        background:#fff;
        input{
            flex:1;
            height:80rpx;
            outline:none;
            border:0;
            border-radius:20rpx;
            background:#F7F7F7;
            padding:10rpx;
            box-sizing:border-box;
            font-size:28rpx;
            color:#666;
        }
        .caozuo{
            flex:0 0 220rpx;  
            color:#9D9D9D;
            font-size:28rpx;
            .iconfont{
                display:inline-block;
                font-size:26rpx;
                margin-right:10rpx;
            }
            .dianji{
                 margin-right:20rpx;
                 .iconfont-shurukuangchakanmima{
                    font-size:24rpx; 
                }
            }
            
            .iconfont-shoucang{
                font-size:32rpx;
            }
            .shoucang{
                color:#FF4444 !important;
            }
        }
    }
} 
input::-webkit-input-placeholder{
    color:#A1A1A1;
}
</style>
